<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="cart-decrease" v-show="cartQuantity>0 || hideDecrease" @click.stop.prevent="decreaseCart({productData: productData, type: cartType})">
      <span class="icon">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jian"></use>
        </svg></span>
      </div>
    </transition>
    <span class="cart-count" @click.stop.prevent v-show="cartQuantity>0 || hideDecrease">{{cartQuantity}}</span>
    <div class="cart-add" @click.stop.prevent="addToCart({productData: productData, type: cartType})"><span class="icon"><svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-jia"></use>
        </svg></span></div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import config from '@/config'
export default {
  props: {
    hideDecrease: {
      default: false,
      type: Boolean
    },
    productData: {
      Object
    },
    cartType: {
      default: 1,
      type: Number
    }
  },
  data() {
    return {
      city: {
        isShow: false,
        cityData: [],
        onChoose: null,
        localCity: {},
        starCity: []
      }
    }
  },
  methods: {
    ...mapActions([
      'addToCart',
      'decreaseCart'
    ])
  },
  created() {
  },
  computed: {
    ...mapGetters({
      normalCart: 'normalCart',
      specCart: 'specCart'
    }),
    cartQuantity() {
      let quantity = 0
      let cartProduct = this[config.cart[this.cartType]]
      for (var item of cartProduct) {
        if (item.product_id === this.productData.product_id) {
          quantity = item.quantity
        }
      }
      return quantity
    }
  }
}
</script>

<style lang="scss">
  @import '../assets/styles/cartcontrol';
</style>
